<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<link rel="stylesheet" href="/layui/css/layui.css">
<head>
    <script th:src="@{/assets/js/jquery.min.js}"></script>
    <script th:src="@{/assets/js/layer.js}"></script>
</head>
<div th:replace="client/header::header(${session.article.getTitle()},null)"></div>
<body>
<article class="main-content post-page">
    <div class="post-header">
        <h1 class="post-title" itemprop="name headline" th:text="${session.article.getTitle()}"></h1>
        <div class="post-data">
            <time th:datetime="${session.article.getCreated()}" itemprop="datePublished"
                  th:text="'发布于 '+ ${commons.dateFormat(session.article.getCreated())}"></time>
        </div>
    </div>
    <br/>
    <div id="post-content" class="post-content content" th:utext="${commons.article(session.article.getContent())}"></div>
    <th:block th:if="${session.user_detail}=='yes'">
        <a th:href="@{/userArticles/}+'1/'+${session.user.getId()}"
           class="btn btn-default waves-effect waves-light" style="margin-top: 100px;margin-left: 580px">
            <i class="fa fa-edit"></i> <span>返&nbsp;&nbsp;回</span></a>
        <a th:href="@{'/user/toEditArticle/'+${session.article.getId()}}"
           class="btn btn-primary waves-effect waves-light" style="margin-top: 100px;margin-left: 30px">
            <i class="fa fa-edit"></i> <span>编&nbsp;&nbsp;辑</span></a>
    </th:block>
    <th:block th:if="${session.user_detail}!='yes'">
        <a th:href="@{/user/}" class="btn btn-primary waves-effect waves-light" style="margin-left: 700px;margin-top: 50px">
            返回首页
        </a>
    </th:block>
</article>
<length><h3 style="color: #2e6da4;margin-left: 380px">最新评论</h3></length>
<hr style="width:800px;height: 3px;background-color:#7dffc5;align-content: center;margin-left: 380px"/>
<div th:replace="client/comments::comments"></div>

<div th:replace="client/footer::footer"></div>
<!-- 使用layer.js实现图片缩放功能 -->
<script type="text/JavaScript">
    $('.post-content img').on('click', function () {
        var imgurl = $(this).attr('src');
        var w = this.width * 2;
        var h = this.height * 2 + 50;
        layer.open({
            type: 1,
            title: false, //不显示标题栏
            area: [w + "px", h + "px"],
            shadeClose: true, //点击遮罩关闭
            content: '\<\div style="padding:20px;">' +
            '\<\img style="width:' + (w - 50) + 'px;" src=' + imgurl + '\>\<\/div>'
        });
    });

</script>
</body>
</html>